{extend name="index/index" /}
{block name="index"}
        <div class="tpl-content-wrapper">
            <div class="tpl-content-page-title">
                <font color="#8cd900"><strong>{$name['name']}/</strong></font>子分类列表

            </div>
            <ol class="am-breadcrumb">
                <li><a href="{:url('admin/index/index')}" class="am-icon-home">首页</a></li>
                <!-- <li><a href="#">Amaze UI CSS</a></li> -->
                <li class="am-active"><font color="#8cd900">{$name['name']}/</font>子分类列表</li>

            </ol>
            <div class="tpl-portlet-components">
                <div class="portlet-title">
                    <div class="caption font-green bold">
                    </div>
                    <div class="tpl-portlet-input tpl-fz-ml">
                    </div>


                </div>
                <div class="tpl-block">
                    <div class="am-g">
                        <div class="am-u-sm-12 am-u-md-6">
                            <div class="am-btn-toolbar">
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-3">
                        </div>
                        <div class="am-u-sm-12 am-u-md-3">
                            <div class="am-input-group am-input-group-sm">
                                <form action="{:url('admin/Category/index')}">
                                    <input type="text" name="title" class="am-form-field" style="width: 185px" placeholder="请输入分类名">
                                    <span class="am-input-group-btn">
                                        <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search" type="submit"></button>
                                    </span>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="am-g">
                        <div class="am-u-sm-12">
                            <form class="am-form">
                                <table class="am-table am-table-striped am-table-hover table-main">
                                    <thead>
                                        <tr>
                                            <th class="table-id">ID</th>
                                            <th class="table-title">姓名</th>
                                            <th class="table-title">父级ID</th>
                                            <th class="table-type">分类路径</th>
                                            <th class="table-type">状态</th>
                                            <th class="table-set">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {volist name="data" id="v"}
                                        <tr>
                                            <td>{$v['id']}</td>
                                            <td>{$v['name']}</td>
                                            <td>{$v['pid']}</td>
                                            <td>{$v['path']}</td>
                                            {if condition="$v.display eq 1"}
                                            <td><font color="green" size="2"><strong>运行中</font></strong></td>
                                            {else /}
                                            <td><font color="red"><strong>禁用中</strong></font></td>
                                            {/if}</td>
                                            <td>
                                                <div class="am-btn-toolbar">
                                                    <div class="am-btn-group am-btn-group-xs">
                                                        <a href="javascript:void(0);" class="am-btn am-btn-default am-btn-xs am-text-secondary cate_edit" style="background: white;color:skyblue" user-id="{$v['id']}" onclick="edit_cate()">
                                                            <span class="am-icon-pencil-square-o"></span>编辑</a>
                                                        <a href="javascript:void(0);" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" style="color: red;background:white" onclick="del(this,'{$v['id']}')" title="删除">删除</a>
                                                        <a href="javascript:void(0);" class="am-btn am-btn-default am-btn-xs am-hide-sm-only addcation" style="background:white" onclick="add_cation()" user-id="{$v['id']}"><span class="am-icon-copy"></span>添加子分类</button></a>
                                                        <a href="{:url('admin/Category/checkcation', ['id'=>$v['id']])}" class="am-btn am-btn-default am-btn-xs am-hide-sm-only" style="background:white"><span class="am-icon-copy"></span>查看子分类</button></a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        {/volist}
                                    </tbody>
                                </table>
                                <div class="am-cf">

                                    <div class="am-fr">
                                        {$page}
                                    </div>
                                </div>
                                <hr>

                            </form>
                        </div>

                    </div>
                </div>
                <div class="tpl-alert"></div>
            </div>

        </div>
<!-- 注册模态框 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <header class="modal-header">
      <h2 style="margin:0px auto;font-size: 25px">&nbsp;&nbsp;&nbsp;添加一级分类</h2>
      <span class="close">×</span>
    </header>
    <div class="modal-body">
      <form id="form_category" method="post">
        <table align="center" style="margin-left: 150px;">
            <tr>
              <td>分类名:</td>
              <td><input type="text" name="name" id="user_name" class="namefile" onblur="checkUser()" /></td>
              <td id="name" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
              <td>状态:</td>
              <td><select name="display">
                  <option value="1">激活</option>
                  <option value="2">禁用</option>
              </select></td>
              <td id="" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
        </table>
    </div>
      <footer class="modal-footer">
        <div id="cancel" class="cancel">取消</div>
        <div id="cancel" class="cancel" onclick="add()">保存</div>
      </footer>
      </form>
  </div>
</div>
<!-- 新增模态框 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <header class="modal-header">
      <h2 style="margin:0px auto;font-size: 25px">&nbsp;&nbsp;&nbsp;添加一级分类</h2>
      <span class="close">×</span>
    </header>
    <div class="modal-body">
      <form id="form_category" method="post">
        <table align="center" style="margin-left: 150px;">
            <tr>
              <td>分类名:</td>
              <td><input type="text" name="name" id="user_name" class="namefile" onblur="checkUser()" /></td>
              <td id="name" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
              <td>状态:</td>
              <td><select name="display">
                  <option value="1">激活</option>
                  <option value="2">禁用</option>
              </select></td>
              <td id="" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
        </table>
    </div>
      <footer class="modal-footer">
        <div id="cancel" class="cancel">取消</div>
        <div id="cancel" class="cancel" onclick="add()">保存</div>
      </footer>
      </form>
  </div>
</div>


<!-- 修改模态框 -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <header class="modal-header">
      <h2 style="margin:0px auto;font-size: 25px">&nbsp;&nbsp;&nbsp;修改一级分类</h2>
      <span class="close1">×</span>
    </header>
    <div class="modal-body">
      <form id="edit_category" method="post">
        <table align="center" style="margin-left: 150px;">
            <tr>
                <input type="hidden" name="id" id="cateid">
              <td>分类名:</td>
              <td><input type="text" name="name" id="catename" class="namefile" onblur="checkUser()" /></td>
              <td id="name" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
              <td>状态:</td>
              <td><select name="display">
                  <option value="1">激活</option>
                  <option value="2">禁用</option>
              </select></td>
              <td id="" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
        </table>
    </div>
      <footer class="modal-footer">
        <div id="cancel1" class="cancel">取消</div>
        <div id="cancel1" class="cancel" onclick="editcategory()">保存</div>
      </footer>
      </form>
  </div>
</div>


<!-- 添加子类模态框 -->
<div id="modal2" class="modal">
  <div class="modal-content">
    <header class="modal-header">
      <h2 style="margin:0px auto;font-size: 25px" class="cation"></h2>
      <span class="close2">×</span>
    </header>
    <div class="modal-body">
      <form id="son_category" method="post">
        <table align="center" style="margin-left: 150px;">
            <tr>
                <input type="hidden" name="id" id="cationid">
                <input type="hidden" name="path" id="cationpath">
              <td>分类名:</td>
              <td><input type="text" name="name" id="cationname" class="namefile" onblur="checkUser()" /></td>
              <td id="name" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
              <td>状态:</td>
              <td><select name="display">
                  <option value="1">激活</option>
                  <option value="2">禁用</option>
              </select></td>
              <td id="" style="color:#757575"></td>
            </tr>
            <tr height="10"></tr>
        </table>
    </div>
      <footer class="modal-footer">
        <div id="cancel2" class="cancel">取消</div>
        <div id="cancel2" class="cancel" onclick="soncation()">保存</div>
      </footer>
      </form>
  </div>
</div>

    <script src="/static/admin/assets/js/toastr.min.js"></script>
    <script src="/static/admin/assets/js/jquery.min.js"></script>
    <script src="/static/admin/assets/js/jquery-1.8.3.min.js"></script>
    <script src="/static/admin/assets/js/my.js"></script>

    <script>
            function del(obj,id){

                $.ajax({
                    url:"del_category",
                    Type:'post',
                    data:{id:id},
                    dataType:'json',
                    success:function(data){

                        window.location.reload();
                        alert(data);
                    }
                });

            }

        function add(){
              var data = $('#form_category').serialize();
              console.log(data);

                $.ajax({
                    url:"saveCategory",
                    Type:'post',
                    data:data,
                    dataType:'json',
                    success:function(data){
                      // window.location.reload();

                      if (data.status) {
                          // modal1.style.display = "none";
                          toastr.success(data.msg);
                          window.location.reload();

                      } else {
                          toastr.error(data.msg);
                      }

                    },
                    error:function(data){

                        toastr.error('系统故障,请联系管理员');
                    }
                });
            }

        function editcategory(){
              var data = $('#edit_category').serialize();
              console.log(data);

                $.ajax({
                    url:"/editcation",
                    Type:'post',
                    data:data,
                    dataType:'json',
                    success:function(data){
                      // window.location.reload();

                      if (data.status) {
                          // modal1.style.display = "none";
                          toastr.success(data.msg);
                          window.location.reload();

                      } else {
                          toastr.error(data.msg);
                      }

                    },
                    error:function(data){

                        toastr.error('系统故障,请联系管理员');
                    }
                });
            }



        function soncation(){
              var data = $('#son_category').serialize();
              console.log(data);

                $.ajax({
                    url:"docationCategory",
                    Type:'post',
                    data:data,
                    dataType:'json',
                    success:function(data){
                      // window.location.reload();

                      if (data.status) {
                          // modal1.style.display = "none";
                          toastr.success(data.msg);
                          window.location.reload();

                      } else {
                          toastr.error(data.msg);
                      }

                    },
                    error:function(data){

                        toastr.error('系统故障,请联系管理员');
                    }
                });
            }
    </script>

    <script>
    // 登录
    var btn = document.getElementById('showModel');
    var close = document.getElementsByClassName('close')[0];
    var cancel = document.getElementById('cancel');
    var modal = document.getElementById('modal');

    btn.addEventListener('click', function(){
        modal.style.display = "block";
    });

    close.addEventListener('click', function(){
        modal.style.display = "none";
    });

    cancel.addEventListener('click', function(){
        modal.style.display = "none";
    });


    // 修改
    // var btn = document.getElementById('showModel');
    var close1 = document.getElementsByClassName('close1')[0];
    var cancel1 = document.getElementById('cancel1');
    var moda1l = document.getElementById('modal1');

    function edit_cate(){
      
        modal1.style.display = "block";

    }

    close1.addEventListener('click', function(){
        modal1.style.display = "none";
    });

    cancel1.addEventListener('click', function(){
        modal1.style.display = "none";
    });


    // 添加子分类
    // var btn = document.getElementById('showModel');
    var close2 = document.getElementsByClassName('close2')[0];
    var cancel2 = document.getElementById('cancel2');
    var moda12 = document.getElementById('modal2');

    function add_cation(){
      
        modal2.style.display = "block";

    }

    close2.addEventListener('click', function(){
        modal2.style.display = "none";
    });

    cancel2.addEventListener('click', function(){
        modal2.style.display = "none";
    });




    function checkUser(){

        var user_name = document.getElementById('user_name').value;
        var name = document.getElementById('name');

        if (user_name == ''){
              name.innerHTML = ' *角色名不能为空!';
              name.style.color = '#f00';
              return false;
          }else{
              name.innerHTML = ' *通过验证';
              name.style.color = '#0a0';
              return true;
        }
    }


    </script>
{/block}
